<template>
	<view class="screen">
		<view @click="show = true">
			<text v-if="!start_time">选择日期</text>
			<text v-else style="font-size: 24rpx;">{{start_time}}----{{end_time}}</text>
			<up-icon name="arrow-down-fill" color="#000000" size="15"></up-icon>
		</view>
		<view>
			<text style="margin-right: 52rpx; color: #FF345E;">支出¥{{zhichu}}</text>
			<text style="color: #3AB700;">收入¥{{shouru}}</text>
		</view>
	</view>
	<view class="info-item"
		v-for="(item,index) in list">
		<view>
			<view>{{item.title}}</view>
			<view>{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss')}}</view>
		</view>
		<view class="red-box">
			<view class="red">{{item.nums.slice(0,1)== '-'? item.nums: `+${item.nums}`}}</view>
			<view style="margin-top: 24rpx;">{{item.balance}}</view>
		</view>
	</view>
	<view class="tips">
		全部明细已获取~~
	</view>

	<up-calendar :show="show" :minDate="minDate" mode="multiple" maxCount="2" @confirm="confirm"></up-calendar>
</template>

<script setup>
	import { timeFormat } from '@/uni_modules/uview-plus';
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../api/api';
	import { reactive, ref } from 'vue';

	onLoad(() => {
		bills()
		bill_count()
		minDate.value = new Date("2024-11-1").getTime();
	})

	const list = reactive([])
	const shouru = ref("")
	const zhichu = ref("")
	const show = ref(false)
	const minDate = ref('')
	const start_time = ref('')
	const end_time = ref('')

	function confirm(e) {
		console.log(e, 'e')
		if (e.length == 1) return uni.$showMsg("请选择结束日期")

		if (!e.length) {
			start_time.value = ''
			end_time.value = ''
			list.length = 0

			bills()
			show.value = false
			return
		}
		start_time.value = e[0]
		end_time.value = e[1]
		list.length = 0

		bills({
			start_time: new Date(start_time.value).getTime() / 1000,
			end_time: new Date(end_time.value).getTime() / 1000
		})

		show.value = false
	}

	function bills(data = {}) {
		api.user.bills(data).then(res => {
			Object.assign(list, res.data.list_data)

			shouru.value = res.data.shouru
			zhichu.value = res.data.zhichu
		})
	}

	function bill_count() {
		api.user.bill_count().then(res => {

		})
	}
</script>

<style lang="scss">
	.info-item {
		padding: 0 32rpx;
		height: 150rpx;
		border-bottom: 2rpx solid #d9d9d9;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>view:nth-child(1) {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;

			>view:nth-child(2) {
				font-weight: 400;
				font-size: 24rpx;
				color: #9A9A9A;
				margin-top: 24rpx;
			}
		}

		.red-box {
			color: #aaaaaa;
			font-size: 24rpx;

			.red {
				font-weight: 600;
				font-size: 28rpx;
				color: #FF345E;
			}

			.green {
				font-weight: 600;
				font-size: 28rpx;
				color: #3AB700;
			}
		}
	}

	.tips {
		margin-top: 32rpx;
		text-align: center;
		width: 100%;
		font-size: 26rpx;
		color: #c1c1c1;
	}

	.screen {
		display: flex;
		// justify-content: space-between;
		flex-direction: column;
		padding: 32rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		line-height: 1;

		>view {
			display: flex;
			align-items: center;
			height: 50rpx;
		}

		>view:nth-child(2) {
			justify-content: flex-end;
		}

	}
</style>